<template>
  <div style="padding: 0 0.2rem">
    <echarts
      :chartStyle="{
        height: '1.92rem',
      }"
      :option="option"
    ></echarts>

    <div class="legend">
      <div class="legend-item" v-for="(item, index) in chartData" :key="index">
        <div class="left">
          <div
            class="square icon"
            :style="{
              'background-color': colorList[index],
            }"
          ></div>
          {{ item.name }}
        </div>
        <div>
          <span class="num">
            {{ item.num }}
          </span>
          人
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Echarts } from "../components";

export default {
  components: {
    Echarts,
  },
  data() {
    return {
      option: {},
      chartData: [],
      colorList: [],
    };
  },
  mounted() {
    this.initOption();
  },
  methods: {
    initOption() {
      const chartData = [
        {
          name: "科技特派员",
          value: "30",
          num: 9999,
          unit: "%",
        },
        {
          name: "科技特派团员",
          value: "23",
          num: 9999,
          unit: "%",
        },
        {
          name: "科技特派队",
          value: "20",
          num: 9999,
          unit: "%",
        },
        {
          name: "百团千员",
          value: "13",
          num: 9999,
          unit: "%",
        },
        {
          name: "“三区”人才",
          value: "40",
          num: 9999,
          unit: "%",
        },
      ];

      const colorList = ["#006DFF", "#006DFF", "#FCCA10", "#E04155", "#33E8E0"];
      this.colorList = colorList;

      this.chartData = chartData;
      this.option = {
        // backgroundColor: "#000",
        tooltip: {
          show: false,
        },

        legend: {
          top: "center",
          right: "3%",
          orient: "vertical",
          icon: "diamond",
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 15,
          formatter: function (params) {
            for (var i = 0; i < chartData.length; i++) {
              if (params === chartData[i].name) {
                const rate = chartData[i].unit
                  ? chartData[i].value + chartData[i].unit
                  : chartData[i].value;
                // const value = chartData[i].valueUnit
                //   ? chartData[i].value + chartData[i].valueUnit
                //   : chartData[i].value;

                return `{name| ${params}} {rate| ${rate}}`;
                // return "{name|" + params + "}{rate|" + rate;
              }
            }
          },
          textStyle: {
            rich: {
              name: {
                fontSize: 12,
                fontWeight: 400,
                width: 50,
                padding: [0, 10, 0, 4],
                color: "white",
              },
              rate: {
                fontSize: 12,
                fontWeight: 400,
                width: 50,
                align: "right",
                color: "#fff",
              },
              //   value: {
              //     fontSize: 12,
              //     fontWeight: 400,
              //     width: 50,
              //     align: "right",
              //     color: "#fff",
              //     padding: [0, 10, 0, 20],
              //   },
            },
          },
          selectedMode: false,
        },
        series: [
          {
            // name: "Access From",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["48%", "68%"],
            avoidLabelOverlap: false,
            selectedOffset: 1,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
                fontWeight: "bold",
              },
              disabled: false,
              scale: false,
              scaleSize: 0,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: (params) => {
                  return colorList[params.dataIndex];
                },
              },
            },
            silent: true,
            data: chartData,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.legend {
  padding: 0.1rem;
  padding-bottom: 0.05rem;
  background-size: 100% 100%;
  background-image: url("@/assets/screen/b1.png");
  &-item {
    height: 0.36rem;
    font-size: 0.14rem;
    background-size: 100% 100%;
    background-image: url("@/assets/screen/ls1.png");
    margin-bottom: 0.11rem;
    display: flex;
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding: 0.1rem;
    box-sizing: border-box;
    color: white;

    .left {
      display: flex;
      align-items: center;
    }
    .icon {
      margin-right: 0.2rem;
    }

    .num {
      color: #ca9136;
    }
  }

  .square {
    width: 0.12rem;
    height: 0.12rem;
    background-color: #3498db;
    transform: rotate(45deg);
  }
}
</style>
